﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Address.aspx.cs" Inherits="GoShopping.Address" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="Content/css/Shopping%20cart.css" rel="stylesheet" />
    <script src="Content/js/vue.js"></script>
    <script src="Content/js/jquery-1.10.2.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        h1 {
            font-size: 30px;
            font-weight: 400;
            line-height: 68px;
            color: #757575;
        }

        .address_box {
            background-color: white;
            width: 80%;
            margin: 50px auto;
            height: 500px;
            padding: 50px;
        }

        .address_add {
            text-align: center;
            line-height: 178px;
            font-size: 40px
        }

        .address_list {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .address_item, .address_add {
            width: 268px;
            height: 178px;
            border: 1px solid #e0e0e0;
            cursor: pointer;
            position: relative;
            margin-right: 17px;
            margin-bottom: 20px;
        }

        .address_info {
            line-height: 22px;
            color: #757575;
            padding: 15px 24px 0;
        }

        .address_action {
            display: inline-block;
            cursor: pointer;
            position: absolute;
            right: 20px;
            bottom: 20px
        }

        .address_moren {
            display: inline-block;
            cursor: pointer;
            position: absolute;
            right: 20px;
            top: 20px;
            color: #00CBFD
        }

        .address_item:hover, .address_add:hover {
            border: 2px solid #00CBFD
        }

            .address_item:hover .address_action {
                display: block;
                font-size: 20px;
                color: #00CBFD
            }

        .el-icon-circle-plus-outline:hover {
            color: #00CBFD
        }

        .address_action {
            display: none
        }
        .set{
            width:110px;
            height:25px;
            line-height:25px;
            border: 1px solid #e0e0e0;
            text-align:center;
            cursor: pointer;
            color: #757575;
            position:absolute;
            bottom:5px;
            left: 50%;
			transform: translate(-50%, 0);
            display:none
        }
        .address_item:hover .set{
            display:block;
            border:none;
            background-color:#00CBFD;
            color:white
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="header">
            <div class="header-logo">
                <img src="images/Logo.png" />
            </div>
            <div class="header-title">
                <h2>我的地址</h2>
                <p>温馨提示：可以添加多个地址哦~</p>
            </div>
            <div class="flex"></div>
            <div class="topbar-info">
                <a href="UserInfo.aspx">返回>></a>
            </div>
        </div>
        <div class="address_box">
            <h1>收获地址</h1>
            <div class="address_list">
                <div class="address_add">
                    <i class="el-icon-circle-plus-outline" @click="dialogVisible = true"></i>
                </div>
                <div class="address_item" v-for="item in addressList">

                    <div class="address_info">
                        <div class="address_name">{{item.Name}}</div>
                        <div class="address_tel">{{item.Phone}}</div>
                        <div class="address_icon">{{item.AddressU}}</div>
                    </div>
                    <div class="set" @click="setMoren(item.AddressID)">设置默认地址</div>
                    <div class="address_action" @click="del(item.AddressID)">
                        <i class="el-icon-delete"></i>
                    </div>
                    <div class="address_moren" v-if="item.Moren==0">
                        <i class="el-icon-success"></i>
                    </div>
                </div>
                

            </div>
        </div>
        <el-dialog title="添加收货地址" :visible.sync="dialogVisible" width="30%">
            <el-form label-width="80px">
                <el-form-item label="收件人">
                    <el-input v-model="AddresssName"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="AddressPhone"></el-input>
                </el-form-item>
                <el-form-item label="收货地址">
                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="Address"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="subMit">提 交</el-button>
            </span>
        </el-dialog>

    </form>
</body>
</html>
<script type="module">
    import { sendAjaxCar1 } from './Content/js/FactoryCar.js'
    new Vue({
        el: "#form1",
        data: {
            //弹出框状态
            dialogVisible: false,
            AddresssName: '',
            AddressPhone: '',
            Address: '',
            obj: {},
            data1: {},
            addressList:[]
        },
        methods: {
            //设置默认地址
            setMoren() {

            },
            //删除
            async del(ID) {
                var that = this
                that.obj.url = "tools/Addressds.ashx"
                that.obj.type = "POST"
                that.data1.t = "2"
                that.data1.AddressID = ID
                await sendAjaxCar1(that.obj, that.data1).then(res => {
                    console.log(res)
                    if (res.status == "删除成功！") {
                        that.addressList = that.addressList.filter(item => {
                            return item.AddressID != ID
                        })
                    }
                })
            },
            //页面加载立即执行·1
            async now() {
                var that = this
                that.obj.url = "tools/Addressds.ashx"
                that.obj.type = "POST"
                that.data1.UserID = sessionStorage.getItem("UserID")
                that.data1.t = "0"
                await sendAjaxCar1(that.obj, that.data1).then(res => {
                    console.log(res)
                    if (res.status != "没有记录！") {
                        that.addressList = res.res
                    }
                })
            },
            //提交新地址
            async subMit() {
                var that = this
                if (that.AddressPhone != '' && that.AddresssName != '' && that.Address!='') {
                    that.obj.url = "tools/Addressds.ashx"
                    that.obj.type = "POST"
                    that.data1.Name = that.AddresssName
                    that.data1.Phone = that.AddressPhone
                    that.data1.AddressU = that.Address
                    that.data1.Mores = 1
                    that.data1.UserID = sessionStorage.getItem("UserID")
                    that.data1.t = "1"
                    await sendAjaxCar1(that.obj, that.data1).then(res => {
                        if (res.status = "添加成功！") {
                            //无感操作
                            that.now()
                            this.$message({
                                message: '添加成功~',
                                type: 'success'
                            })
                        } else {
                            this.$message({
                                message: '添加失败请联系客服处理~',
                                type: 'warning'
                            });
                        }
                        console.log(res)
                    })
                    this.dialogVisible = false
                } else {
                    this.$message({
                        message: '信息未填写完整！',
                        type: 'warning'
                    });
                }
            }
        },
        async created() {
            this.now()
            
        }
    })
</script>
